<!-- 
    @file: 用户管理-修改
    @auth: lizibin
 -->
<template>
    <!-- 弹窗添加链接 -->
    <el-dialog v-model="modifyUserDialogFormVisible" title="编辑用户信息" width="400px" center
        @close="modifyUserCloseDialog(false, ruleFormRef)">
        <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item prop="userName" label="用户名：">
                <el-input v-model="form.userName" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item prop="userPass" label="密&nbsp;&nbsp;&nbsp;&nbsp;码：">
                <el-input v-model="form.userPass" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item prop="userEmail" label="邮&nbsp;&nbsp;&nbsp;&nbsp;箱：">
                <el-input v-model="form.userEmail" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item prop="userSignature" label="签&nbsp;&nbsp;&nbsp;&nbsp;名：">
                <el-input v-model="form.userSignature" placeholder="请输入个人签名" maxlength="20" show-word-limit />
            </el-form-item>
            <el-form-item prop="userType" label="类&nbsp;&nbsp;&nbsp;&nbsp;型：">
                <el-select v-model="form.userType" placeholder="请选择用户类型">
                    <el-option label="管理员" value="0" />
                    <el-option label="普通用户" value="1" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="modifyUserCloseDialog(false, ruleFormRef)">取消</el-button>
                <el-button plain color="#2fa7b9" @click="submit(ruleFormRef)"
                    @keyup.enter="submit(ruleFormRef)">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import {
    reactive,
    ref,
    toRefs,
    onUpdated,
    watch
} from 'vue'

import {
    ElMessage,
    ElNotification,
} from 'element-plus'
import { EditReactive } from "@/types/userManagerTypes";
import { CheckUserName, CheckUserEmail, UpdateUserInfo } from '@/api/backstage/index'
import type { FormInstance, FormRules, UploadFile, UploadInstance } from 'element-plus'
type Props = {
    modifyUserDialogFormVisible?: boolean,
    userInfo?: any,
}
const props = withDefaults(defineProps<Props>(), {
    modifyUserDialogFormVisible: false,
    userInfo: '',
})
const emit = defineEmits(['onModifyUserCloseDialog'])

watch(() => [props.userInfo, props.modifyUserDialogFormVisible], (newval, oldval) => {
    state.userInfo = newval[0]
    state.modifyUserDialogFormVisible = newval[1]

    state.form.userName = state.userInfo.userName;
    state.form.userPass = state.userInfo.userPass;
    state.form.userEmail = state.userInfo.userEmail;
    state.form.userSignature = state.userInfo.userSignature;
    state.form.userType = state.userInfo.userType.toString();
})
// 获取页面元素
const ruleFormRef = ref<FormInstance>();

const state = reactive<EditReactive>({
    // 弹窗状态
    modifyUserDialogFormVisible: props.modifyUserDialogFormVisible,
    // 当前编辑的用户信息
    userInfo: {
        userEmail: '',
        userIcon: '',
        userPass: '',
        userRegdate: '',
        userSignature: '',
        userId: -1,
        userType: -1,
        userName: '',
    },
    // 表单信息
    form: {
        userName: "",
        userPass: "",
        userEmail: "",
        userSignature: "",
        userType: ""
    },
})
const { modifyUserDialogFormVisible, userInfo, form } = toRefs(state)
// 用户名正则表达式判断
var nameGrep = /^[\u4e00-\u9fa5a-zA-Z0-9_]{2,8}$/;
// 邮箱正则表达式判断
var emailGrep =
    /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
// 密码正则表达式判断
var passGrep = /^[a-zA-Z0-9_.-=*&^%$#@!+]{6,18}$/;

// 用户名的非空、正则验证
const validateName = (rule: any, value: any, callback: any) => {
    // 内容没有改变时不做验证
    if (value !== state.userInfo.userName) {
        if (!value) {
            return callback(new Error('请填写此字段~'))
        } else {

            if (!nameGrep.test(value)) {
                callback(new Error('用户名由2~8位中英文、数字、下划线组成'));

            } else {
                let params = {
                    registerName: value
                };
                CheckUserName(
                    params
                ).then((res: any) => {
                    if (res.code == 1020) {
                        callback(new Error('此用户名已被注册，请更换一个'));
                    } else {
                        callback()
                    }
                })
            }
        }
    } else {
        callback()
    }

}
// 密码的非空验证
const validatePass = (rule: any, value: any, callback: any) => {
    // 内容没有改变时不做验证
    if (value !== state.userInfo.userPass) {
        if (!value) {
            return callback(new Error('请填写此字段~'))
        } else {
            if (!passGrep.test(value)) {
                callback(new Error('密码6~18位字母、数字、特殊字符组成'));
            } else {
                callback()
            }
        }
    } else {
        callback()
    }
}
// 邮箱的非空验证
const validateEmail = (rule: any, value: any, callback: any) => {
    // 内容没有改变时不做验证
    if (value !== state.userInfo.userEmail) {
        if (!value) {
            return callback(new Error('请填写此字段~'))
        } else {
            if (!emailGrep.test(value)) {
                callback(new Error('请按照正确的邮箱格式输入'));
            } else {
                let params = {
                    registerEmail: value
                };
                CheckUserEmail({
                    params
                }).then((res: any) => {
                    if (res.code == 1) {
                        callback(new Error('此邮箱已被注册，请更换一个'));
                    } else {
                        callback()
                    }
                })
            }
        }
    } else {
        callback()
    }
}


// 约束规则 正则
const rules = reactive({
    userName: [{
        validator: validateName,
        trigger: 'blur'
    }],
    userPass: [{
        validator: validatePass,
        trigger: 'blur'
    }],
    userEmail: [{
        validator: validateEmail,
        trigger: 'blur'
    }],
});

// 取消
const modifyUserCloseDialog = (visible: boolean, FormInstance: any) => {
    // 关闭窗口
    emit("onModifyUserCloseDialog", visible);

    FormInstance.resetFields()
};

// 提交修改
const submit = async (formEl: FormInstance | undefined) => {
    // 1：校验表单信息
    if (!formEl) return
    await formEl.validate((valid) => {
        // 如果表单校验成功 提交数据到后台
        if (valid) {
            if (state.form.userName == state.userInfo.userName &&
                state.form.userPass == state.userInfo.userPass &&
                state.form.userEmail == state.userInfo.userEmail &&
                state.form.userSignature == state.userInfo.userSignature &&
                parseInt(state.form.userType) == state.userInfo.userType) {
                emit("onModifyUserCloseDialog", false);
                ElNotification({
                    title: '提示',
                    message: "没有任何变化的操作~",
                    type: 'success',
                })
            } else {
                // 修改用户信息
                const params = {
                    userId: state.userInfo.userId,
                    userName: state.form.userName,
                    userPass: state.form.userPass,
                    userEmail: state.form.userEmail,
                    userSignature: state.form.userSignature,
                    userType: parseInt(state.form.userType)
                }
                UpdateUserInfo(params).then((res) => {
                    if (res.code == 0) {
                        emit("onModifyUserCloseDialog", false, res.data);

                        ElNotification({
                            title: '提示',
                            message: "用户信息修改成功~",
                            type: 'success',
                        })
                    }
                })
            }
        } else {
            ElMessage.error('根据要求填写内容进行修改~')
        }
    })
}

</script>
<style scoped>
.el-button--text {
    margin-right: 15px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.el-select {
    width: 100%;
}

:global(.el-dialog__title) {
    color: #2fa7b9 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

:deep(.el-upload-dragger) {
    padding: 0px !important;
    width: 100%;
    height: 130px;
}

:global(.el-dialog__body) {
    padding: 25px calc(var(--el-dialog-padding-primary) + 5px) 0px !important;
}
</style>